<template>
  <!-- 推广佣金列表列表页面 -->
  <view class="main">
    <view class="_xian"> </view>
    <view class="topTab">
      <view
        :class="[activeIndex == index ? 'activeIndex item' : 'item']"
        v-for="(item, index) in ['全部', '已结算', '待结算']"
        :key="index"
        @tap="handleTap(index)"
      >
        <text>{{ item }}</text>
        <text class="xian"></text>
      </view>
    </view>

    <!--<swiper @change='handleIndexT' :current="activeIndex" :style="{ height: dongHeight }" duration='200'>
<swiper-item v-for="(v,i) in 3" :key="i"> -->
    <!-- 空状态显示 -->
    <view class="wu_Huo" v-if="commissionList.length == 0">
      <image src="../../imges/wujinqian.png" mode="aspectFill"></image>
      <text>暂无记录</text>
    </view>
    <view class="list_">
      <view class="item_" v-for="(item, index) in commissionList" :key="index">
        <view class="top_">
          <navigator
            :url="'/pages/index/personal?id=' + item.createUid"
            hover-class="none"
            class="left_"
          >
            <image :src="item.avatarUrl" mode="aspectFill"></image>
          </navigator>
          <view class="right_">
            <view class="one">
              {{ item.realName }}
            </view>
            <view class="two">
              {{ item.company }}
            </view>
          </view>
        </view>
        <view class="center_">
          <view class="left_">
            <image :src="item.orgUrl" mode="aspectFill"></image>
            <text>{{ item.orgName }}</text>
          </view>
          <navigator
            :url="'/pages/index/detail?id=' + item.orgId + '&isZ=1'"
            class="right_"
          >
            查看圈子
          </navigator>
        </view>
        <view class="bottom_">
          <view class="one">
            <view class="left"> 邀请时间： </view>
            <view class="right">
              提成金额：<text>￥{{ item.account }}</text>
            </view>
          </view>
          <view class="two">
            <view class="left">
              {{ item.joinShowDate }}
            </view>
            <view class="right" v-if="item.settlementStatus == 0">
              预计结算时间：{{ item.dueShowDate }}
            </view>
            <view class="right" v-if="item.settlementStatus == 1">
              结算时间：{{ item.showDate }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 	</swiper-item>
		</swiper> -->

    <view class="footer_b">
      <view class="left_"> 统计： </view>
      <view class="right_">
        <view class="one_">
          <view class="top">
            {{ detailJin.settled }}
          </view>
          <view class="bottom"> 已结算(元) </view>
        </view>
        <view class="xian_"> </view>
        <view class="two_">
          <view class="top">
            {{ detailJin.unsettled }}
          </view>
          <view class="bottom"> 待结算(元) </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      activeIndex: 0,
      commissionList: [], //佣金列表
      bottom: false,
      noMore: false,
      pageSize: 10, //页数
      detailJin: {},
      // dongHeight : 'calc(100vh - 260rpx)'
    };
  },
  onLoad() {
    this.handleList();
    this.handleQian();
  },
  onShow() {
    this.bottom = false;
  },
  onReachBottom() {
    uni.showLoading({
      title: "加载中",
    });
    this.bottom = true;
    this.pageSize = this.pageSize + 10;
    this.handleList();
  },
  onPullDownRefresh() {
    this.bottom = false;
    this.noMore = false;
    this.pageSize = 10;
    setTimeout(() => {
      this.handleList();
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 1500,
        icon: "none",
      });
    }, 1000);
  },
  methods: {
    handleIndexT(e) {
      // this.commissionList = [];
      this.bottom = false;
      this.activeIndex = e.detail.current;
      this.handleList();
    },
    handleList() {
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/myHome/myDistribution",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            pageSize: this.pageSize,
            pageNumber: 1,
            type: this.activeIndex,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            this.commissionList = res.data.data.rows;

            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              this.bottom &&
              this.pageSize > 10 &&
              this.commissionList.length < res.data.data.total &&
              !this.noMore
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1500,
                icon: "none",
              });
              this.noMore = true;
              return false;
            }
            if (
              this.bottom &&
              this.pageSize > 10 &&
              this.commissionList.length < res.data.data.total
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1500,
                icon: "none",
              });
            }
            if (
              this.bottom &&
              this.pageSize > 10 &&
              this.commissionList.length >= res.data.data.total
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 1500,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleQian() {
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/myHome/settlement",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          // console.log(res, '发现圈子')
          if (res.data.code == 200) {
            this.detailJin = res.data.data;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleTap(index) {
      //tab栏切换
      if (this.activeIndex == index) {
        return false;
      }
      this.activeIndex = index;
      this.bottom = false;
      this.handleList();
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  ._xian {
    height: 2rpx;
    background-color: #eee;
    width: 750rpx;
    position: fixed;
    top: 100rpx;
    z-index: 99;
  }

  .wu_Huo {
    padding-top: 320rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 330rpx;
      height: 260rpx;
    }

    text {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      line-height: 37px;
    }
  }

  .footer_b {
    position: fixed;
    left: 0;
    bottom: 0;
    border-top: 2rpx solid #eee;
    width: 750rpx;
    height: 100rpx;
    background: #ffffff;
    box-shadow: 0rpx 1rpx 0px 0px rgba(0, 0, 0, 0.2);
    padding: 17rpx 32rpx;
    display: flex;
    justify-content: space-between;

    .left_ {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #888888;
    }

    .right_ {
      display: flex;

      .one_,
      .two_ {
        .top {
          font-size: 30rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ff5700;
        }

        .bottom {
          font-size: 22rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          margin-top: 6rpx;
        }
      }

      .two_ {
        padding-right: 60rpx;
      }

      .xian_ {
        width: 2rpx;
        height: 53rpx;
        background-color: #eee;
        margin: 16rpx 30rpx;
      }
    }
  }

  .topTab {
    width: 100%;
    position: fixed;
    left: 0;
    top: 88rpx;
    display: flex;
    padding: 40rpx 32rpx;
    // border-top: 2rpx solid #eee;
    background-color: #fff;
    z-index: 66;

    .item {
      margin-right: 30rpx;
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }

    .activeIndex {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;

      .xian {
        margin-top: 3rpx;
        width: 36rpx;
        height: 6rpx;
        background: #2168eb;
        border-radius: 3rpx;
        text-align: center;
      }
    }
  }

  .list_ {
    margin-top: 135rpx;
    padding-bottom: 175rpx;

    .item_ {
      padding: 0 32rpx;
      border-bottom: 2rpx solid #eee;
      margin-bottom: 20rpx;

      &:last-child {
        border-bottom: none;
      }

      .top_ {
        display: flex;

        .left_ {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 20rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .right_ {
          height: 80rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .one {
            font-size: 29rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }

          .two {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #888888;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
        }
      }

      .center_ {
        margin-top: 32rpx;
        width: 686rpx;
        height: 140rpx;
        background: #f8f8fa;
        border-radius: 12rpx;
        box-sizing: border-box;
        padding: 31rpx 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left_ {
          display: flex;
          align-items: center;

          image {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 20rpx;
          }

          text {
            font-size: 29rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
        }

        .right_ {
          width: 120rpx;
          height: 46rpx;
          background: linear-gradient(270deg, #1571eb 0%, #3a9aff 100%);
          border-radius: 23rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 46rpx;
          text-align: center;
        }
      }

      .bottom_ {
        padding: 15rpx 0;

        .one {
          display: flex;
          justify-content: space-between;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #888888;

          .left {
            // margin-top: 10rpx;
            position: relative;
            bottom: -10rpx;
          }

          .right text {
            font-size: 36rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ff6400;
          }
        }

        .two {
          display: flex;
          justify-content: space-between;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #888888;
        }
      }
    }
  }
}
</style>
